<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<title>支付订单${order.startDate}</title>
<link rel="stylesheet" href="${BASE_PATH}/static/app/css/base.css" />
<link rel="stylesheet" href="${BASE_PATH}/static/app/css/header.css" />
<link rel="stylesheet" href="${BASE_PATH}/static/app/css/public.css" />
<link rel="stylesheet" href="${BASE_PATH}/static/app/css/payOrder.css" />
<link rel="stylesheet"
	href="${BASE_PATH}/static/lib/layer/need/layer.css" />
<style type="text/css">
.myAlert_container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100000;
}

.myAlert_content {
	width: 150px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100001;
	background-color: white;
	margin-left: -75px;
	margin-top: -50px;
	border-radius: 5px;
}

.myAlertContent_line1 {
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-bottom: 1px solid #EBEBEB;
	font-size: 13px;
}

.myAlertContent_line2 {
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 13px;
}

.asd {
	margin-top: -10px;
}

.logo_text {
	height: 40px;
	line-height: 40px;
	display: inline-block;
	color: #595b60;
	font-size: 14px;
	margin-left: 6px;
	float: left;
}
/*预约时间*/
.bespoke {
    display:none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	line-height: 30px;
	overflow: hidden;
	color: #909090;
	background: rgba(166, 166, 166, 0.73);
	font-size: 14px;
	z-index: -999;
}

.bespoke h3 {
	font-size: 18px;
	color: #646464;
	margin-top: .5rem;
}

.bespoke h2 {
	color: #fc83a6;
	font-size:18px;
}

.bespoke h4 {
	font-size: 15px;
	font-weight: 600;
	 padding-top: .3rem;
}

.bespoke h4::before, .bespoke h4::after {
	display: inline-block;
	content: "";
	width: .9rem; height : .9rem;
	background: url(/static/app/img/201804261113.png) no-repeat;
	background-size: cover;
	vertical-align: -.1rem;
	height: .9rem;
}

.bespoke h4::before {
	margin-right: .5rem;
}

.bespoke h4::after {
	margin-left: .5rem;
}

.bespoke-content {
	position: absolute;
	top: 4.5rem;
	left: 0;
	right: 0;
	background: #fff;
	width:85%;
	margin: auto;
	text-align: center;
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
		border-radius: 16px;
}

.bespoke-logo {
	display: block;
    width: 2.6rem;
    height: 2.1rem;
	background: url(/static/app/img/wxpay.png) no-repeat;
	background-size: cover;
	margin-left: 9rem;
}

.complete-tel {
	    display: block;
    width: 68%;
    height: 2.2rem;
    line-height: 2.2rem;
    margin: auto;
    color: #fff;
    border-radius: 6px;
    background: #f797b7;
}

.complete-tel::before {
	display: inline-block;
    content: "";
    width: .9rem;
    height: 1.1rem;
    background: url(/static/app/img/201804261128.png) no-repeat;
    background-size: cover;
    vertical-align: -.3rem;
    margin-right: .5rem;
}

.complete-close {
    display: block;
    width: 68%;
    height: 2.2rem;
    line-height: 2.2rem;
    margin: auto;
    color: #99e5f8;
    border: 1px solid;
    border-radius: 20px;
    margin-top: 2.4rem;
    font-size: 16px;
}
.bespoke-matter h4::before,.bespoke-matter h4::after{
   display: inline-block;
   content: "";
   width: .9rem;
   height: .7rem;
   background: url(/static/app/img/201804261149.png) no-repeat;
   background-size: cover;
   vertical-align: initial;
}
#timer{
    color: #f797b7;
    text-align: center;
    border: 1px solid;
    border-radius: 6px;
    height: 2.4rem;
    line-height: 2.4rem;
    width: 68%;
    font-size: 24px;
}
.bespoke-matter,.bespoke-service{
    border-top:1px solid #ededed;
    margin-top: 1rem;
    
  
}
.bespoke-matter p{
  padding: 1.3rem;
}
.bespoke-service p:FIRST-OF-TYPE {
	    margin-top: .8rem;
}
.bespoke-service p:NTH-OF-TYPE(2){
    width: 75%;
    line-height:1.5rem;
    text-align: center;
    margin: auto;
    margin-bottom: .5rem;
    }
</style>
</head>
<body>

	<div class="content">
		<div class="header">
			<span class="back" onclick="javascript:history.go(-1);"></span> <a
				href="${BASE_PATH}/index"><span class="logo_pic"></span></a> <span
				class="logo_text">OK 妈咪</span>
		</div>
		<div class="payOrder-num">
			<span class="fL money_txt asd">订单编号</span> <span
				class="fR money_num asd">${orderNum}</span>
		</div>
		<div class="payOrder-money">
			<span class="fL money_txt">订单积分</span> <span class="fR money_num"><c:if
					test="${pointType==1 }">商品积分</c:if>
				<c:if test="${pointType==2 }">健康积分</c:if>
				<c:if test="${pointType==3 }">教育积分</c:if> ${pointsell}</span>
		</div>
		<div class="payOrder-way">
			<div class="way-title">选择支付方式</div>
			<div class="way way-wx">
				<span class="fL wx-img"></span> <span class="fL">积分支付</span> <span
					class="fR select isSelect"></span>
			</div>
		</div>
		<div class="payOrder">
			<button class="payOrder-btn" onclick="doPrePay();"
				style="border: 1px solid #0093dd">确认支付</button>
		</div>
	</div>
	<!-- 预约时间 -->
	<div class="bespoke">
		<div class="bespoke-content">
			<i class="bespoke-logo"></i>
			<h3>你已支付成功</h3>
			<p>你的订单编号为：${orderNum}</p>
			<!-- 实物类商品预约 -->
			<c:if test="${order.goodtype==1}">
				<div class="bespoke-matter">
					<P>请预约到店取货时间，我们备货等你来哦</P>
					<h4>预约到店时间${goodtype}</h4>
					<input type="text" id="timer">
					<span class="complete-close">完成</span>
				</div>
			</c:if>
            <!-- 服务类商品预约 -->
			<c:if test="${order.goodtype==2}">
				<div class="bespoke-service">
					<P>现在就来预约吧，我们等你来哦</P>
					<h4>预约店铺${goodtype}</h4>
					<h2>${order.title}</h2>
					<P>${order.address}</P>
					<a href="tel:${order.tell}" class="complete-tel complete-sub">电话预约时间</a>
					<span class="complete-close">完成</span>
				</div>
			</c:if>
		</div>
	</div>
	<!-- include -->
	<%@include file="../include.jsp"%>
	<!-- lib -->
	<script type="text/javascript"
		src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
	<!-- amazeui -->
	<script type="text/javascript"
		src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
	<!-- lib -->
	<script type="text/javascript"
		src="${BASE_PATH}/static/lib/layer/layer.js"></script>
	<!-- app -->
	<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
   <script type="text/javascript" src="${BASE_PATH}/static/app/js/datePicker.js"></script>
	<script type="text/javascript">
		$('.select').click(
				function() {
					$(this).toggleClass('isSelect');
					$(this).parent().siblings('.way').children('.select')
							.removeClass('isSelect');
				})
		var point = $
		{
			point
		};
		var pointsell = $
		{
			pointsell
		};
		function doPrePay() {
			var pay = document.querySelector(".payOrder-btn");
			pay.setAttribute("disabled", true);
			if (pointsell > point) {
				Kit.ui.alert("积分不足,无法支付");
			} else {
				Kit.ajax.post("${BASE_PATH}/order/doJfPay", {
					orderNum : "${orderNum}",
					flag : 1
				}, function(result) {
					if (result.flag == 0) {
						/*显示预约遮罩层*/
						$(".bespoke").show();
						$(".bespoke").css("z-index","999");
						
					} else {
						pay.setAttribute("disabled", false);
						Kit.ui.alert("支付失败！", function() {
							turnToOrderList("${orderNum}");
						});
					}
				});
			}
		}
		function turnToOrderList(orderNum) {
			Kit.render.redirect("${BASE_PATH}/order/detail/" + orderNum);
		}
		$(function() {
			pushHistory();
			var bool = false;
			setTimeout(function() {
				bool = true;
			}, 1000);
			window.addEventListener("popstate", function(e) {
				if (bool) {
					turnToOrderList("${orderNum}");
				}
			}, false);
			function pushHistory() {
				var state = {
					title : "title",
					url : "#"
				};
				window.history.pushState(state, "title", "#");
			}
		});
		/* 预约显示与影藏 */
		$(".complete-close").click(function() {
			$(".bespoke").hide();
			$(".bespoke").css("z-index","-999");
            var  orderNum="${orderNum}";	
		 
          //点击跳转订单详情页
			var bespokeDate= $("#timer").val();
           if(bespokeDate){
        	   //预约时间不为空
        	   location.href="${BASE_PATH}/order/detailComplete/?orderNum="+ orderNum+"&bespokeDate="+bespokeDate;	
           }else{
        	   //预约时间为空
        	   location.href="${BASE_PATH}/order/detail/" + orderNum;
           }
		   
		});
	
		//下单时间
     	var	startDateS=new Date("${order.startDate}");    
     	var timer=$id("timer");
    	if(timer){
    		var calendar = new datePicker();
    		calendar.init({
    			'trigger': '#timer', /*按钮选择器，用于触发弹出插件*/
    			'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
    			'minDate':'1900-1-1',/*最小日期*/
    			'maxDate':'2100-12-31',/*最大日期*/
    			'onSubmit':function(){/*确认时触发事件*/
    				var theSelectData=calendar.value,
    			    today=new Date(calendar.value),//选择预约时间
    			    startDate=startDateS.getTime(),//下单时间
    			    endDate=startDateS.getTime()+(7*24*60*60*1000);//限制预约时间最大为下单时间7天
    			    //预约时间的时分秒
    			    today.setHours(startDateS.getHours());
    			    today.setMinutes(startDateS.getMinutes());
    			    today.setSeconds(startDateS.getSeconds());
    			  
    			    if(today.getTime()<startDate  ){
    			    	$("#timer").val("");
    					Kit.ui.alert("预约时间不能小于下单时间 ");
    			    }else if(today.getTime()>endDate){
    					$("#timer").val("");
    					Kit.ui.alert("预约时间不能大于下单时间7天");
    				}
    			  },
    			'onClose':function(){/*取消时触发事件*/
    			}
    		});
    	}
    	
    		/*
    		 *获取id
    		*/
    		function $id(id){
    			return document.getElementById(id);
    		}
	</script>
</body>
</html>